<template>
    <div class="shopcart w">
        <div class="top">
            <div class="topShopCartTitle">购物车</div>
            <div>
                <ul>
                    <li>概述</li>
                    <li>参数</li>
                    <li>用户评价</li>
                </ul>
            </div>
        </div>
        <!-- 表格商品 -->
        <el-table ref="multipleTableRef" :data="data.tableData" style="width: 100%" align-items: center
        @select-all="handleSelectionChange" @select="a" :show-overflow-tooltip="true" >
            <el-table-column type="selection" width="55" height="200">
                 <!-- <template #default="{row}">
                    <el-checkbox v-model="row.check" @change="a(row)"></el-checkbox>
                </template> -->
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" width="400" height="200">
            </el-table-column>
            <el-table-column prop="price" label="单价" height="200">
            </el-table-column>
            <el-table-column prop="num" label="数量" height="200">
                <template #default="{row}">        
                    <el-input-number v-model="row.num" :min="1" :max="row.maxNum" class="pro-num" @change="handleChange(row)"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="小计" height="200">
            </el-table-column>
            <el-table-column label="操作" width="120" height="200">
                <template #default="scope">
                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
                        icon-color="#626AEF" title="Are you sure to delete this?" @confirm="confirmEvent(scope.row)"
                        @cancel="cancelEvent">
                        <template #reference>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 底部 -->
        <div class="cartFooter">
            <div class="cartLeft">

            </div>
            <div class="cartRight">
                <p>总价{{num}}￥</p>
                <div @click="settlement">去结算</div>
            </div>
        </div>
    </div>
</template>


<script setup>
    import { onMounted, computed, reactive, ref,watch } from 'vue';
    import { useRouter } from 'vue-router'
    import { getCart } from '@/utils/cate'
    import { useStore } from 'vuex';
    import {all} from '@/utils/last.js'
import { ElNotification } from 'element-plus'
    const router = useRouter()
    const store = useStore()
    const data = reactive({
        tableData: JSON.parse(localStorage.getItem('cartList')) || []
    })
    const settle = ref([]);
    const check = ref(false);
    const handleSelectionChange = (val)=>{
        check.value = !check.value;
        data.tableData.forEach((item) => {
            item.check = !item.check;
            // console.log(item.check);
            // localStorage.setItem('cartList',JSON.stringify(data.tableData));
            // console.log(item.check);
        })
    }

    const num = computed(()=>{
        var num = 0;
        data.tableData.every((item) => {
            if(item.check){
                return num+=item.price*item.num
            }
        })
        return num;
    })

    const a = (val,row)=>{
        console.log(11,row);
        row.check != row.check;
        // localStorage.setItem('cartList',JSON.stringify(data.tableData));
        // console.log(data.tableData);
    }
    const user_id = ref('');
// 数量
    const handleChange = async (value) => {
       user_id.value = localStorage.getItem('user_id')
      let { num, productID, maxNum } = value;
      let data = await all({ user_id: user_id.value, product_id: productID, num: num });
      console.log(data);
        if (num == maxNum) {
            ElNotification.error(`数量不可超过${maxNum}`);
        } else {
            ElNotification.success(data.msg);
        }
    }

    const settlement = () => {
      data.tableData.forEach(item => {
          console.log(item);
        // if (item.check) {
          settle.value.push(item)
          store.commit('sett', settle.value);
          router.push("/confirmOrder");
        // }
      })
    }
    // 删除
    const confirmEvent = (row)=>{
        console.log(row);
    }
    const cancelEvent = ()=>{

    }

    data.tableData =  computed(() => store.state.cartList)
    // 请求购物车列表
    onMounted(() => {
        let userid = store.state.user_id
        getCart(userid).then((data) => {
            console.log(data);
            if (data.code == '001') {
                store.commit('getcart',data.shoppingCartData);
                data.tableData = data.shoppingCartData;
            }
        })
    })



</script>


<style lang="scss" scoped>
    .cartFooter {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .cartRight {
            width: 300px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            p {
                color: red;
            }
            div {
                width: 100px;
                height:100%;
                background-color:orange;
                color: white;
                text-align: center;
                line-height: 50px;
                cursor:pointer;
            }
        }
    }
    /* 头部样式 */
    .top {
        width: 100%;
        height: 66px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        /* background-color: skyblue; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        .topShopCartTitle {
            font-size: 25px;
        }
        div {
            width: 300px;
            height: 100%;
            line-height: 66px;

            ul {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;

                li {
                    cursor: pointer;
                }
            }
        }
    }
</style>